<template>
	<div class="ip-input wos-flex">
<!--		{{value}}-->
		<div>
			<input type="text" v-model="ip[0]" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')" />
		</div>
		<div>.</div>
		<div>
			<input type="text" v-model="ip[1]" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')">
		</div>
		<div>.</div>
		<div>
			<input type="text" v-model="ip[2]" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')">
		</div>
		<div>.</div>
		<div>
			<input type="text" v-model="ip[3]" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')">
		</div>
	</div>
</template>

<script>
    export default {
        name: "ip-input",
	    props:["value"],
	    computed:{
            ip: function(){
                if (this.value != ""){
                    return this.value.split(".")
                }else{
                    return ["","","",""]
                }

            }
	    }
    }
</script>

<style scoped lang="less">
	.ip-input{
		height: 22px;
		width: 180px;
		border: 1px solid #D7D7D7;
		input{
			border: 0 !important;
			width: 40px;
			padding: 0 5px;
			text-align: center;
		}
	}
</style>
